<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title th:text="${comInfo.companyName}">Title for Company</title>
    <!-- Bootstrap core CSS -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<nav th:replace="~{front/log/log_topbar::top}"></nav>

<div class="container" style="margin-top: 80px">

    <div class="row row-offcanvas row-offcanvas-right">
        <div class="container" style="margin-bottom: 20px">
            <h2 th:text="${comInfo.companyName}" id="comNameH"></h2>
            <img src="../images/company_welcome_pic.jpg" style="width: 1140px">
        </div>

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
            <div class="list-group">
                <a href="#comIndex" class="list-group-item active" id="comIndex" th:href="@{'/com_detail_material?companyName='+${comInfo.companyName}}">首页</a>
                <a href="#comContactUs" class="list-group-item" id="comContactUs">联系方式</a>
                <a href="#comIntroduction" class="list-group-item" id="comIntroduction">公司简介</a>
                <a href="#comRoute" class="list-group-item" id="comRoute">物流专线</a>
                <a href="#comMaterial" class="list-group-item" id="comMaterial">货源信息</a>
            </div>
        </div>

        <div class="col-xs-12 col-sm-9" id="content">
            <div class="row">
                <div class="col-xs-12 col-lg-12">
                    <h3>联系方式</h3>
                    <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>&nbsp;&nbsp;<h5 style="display: inline-block">联系电话:</h5><p style="display: inline-block" th:text="${comInfo.phoneNumber}"></p><br>
                    <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>&nbsp;&nbsp;<h5 style="display: inline-block">公司所在地:</h5><p style="display: inline-block" th:text="${comInfo.addressProvince}+'-'+${comInfo.addressCity}"></p><br>
                    <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>&nbsp;&nbsp;<h5 style="display: inline-block">详细地址:</h5><p style="display: inline-block" th:text="${comInfo.addressReal}"></p><br>
                </div>
                <div class="col-xs-12 col-lg-12">
                    <h3 style="display: inline-block">公司简介</h3><button type="button" class="btn btn-link" style="padding-left: 80px" id="comIntroductionMore">查看更多>>></button>
                    <p th:text="${comInfo.introduction}"></p>
                </div>
            </div>
        </div>


    </div><!--/row-->

    <hr>

    <footer>
        <p>&copy; Company 2018</p>
    </footer>

</div><!--/.container-->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../jquery-3.3.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $("#p1").removeClass("active");
        $("#p2").removeClass("active");
        $("#p3").removeClass("active");
        $("#p4").addClass("active");
    })
</script>

<script>
    $("#comIndex").click(function () {
        $("#comIndex").addClass("active");
        $("#comIntroduction").removeClass("active");
        $("#comContactUs").removeClass("active");
        $("#comMaterial").removeClass("active");
        $("#comRoute").removeClass("active");
    })

    $("#comIntroduction").click(function () {
        $("#comIndex").removeClass("active");
        $("#comContactUs").removeClass("active");
        $("#comRoute").removeClass("active");
        $("#comMaterial").removeClass("active");
        $("#comIntroduction").addClass("active");
        $("#content").empty();
        var content = document.getElementById("content");
        var comName = $("#comNameH").text();
        $.ajax({
            url: "/com_detail_material_json",
            data: {"companyName": comName},
            success: function (data) {
                // console.log(data.data);
                content.innerHTML = "<div class=\"row\">" +
                    "                <div class=\"col-xs-12 col-lg-12\">" +
                    "                    <h3 style=\"display: inline-block\">公司简介</h3>" +
                    "                    <p>"+data.data.introduction+"</p>" +
                    "                </div>" +
                    "               </div>";
            }
        })
    });
    $("#comIntroductionMore").click(function () {
        $("#comIndex").removeClass("active");
        $("#comContactUs").removeClass("active");
        $("#comRoute").removeClass("active");
        $("#comMaterial").removeClass("active");
        $("#comIntroduction").addClass("active");
        $("#content").empty();
        var content = document.getElementById("content");
        var comName = $("#comNameH").text();
        $.ajax({
            url: "/com_detail_material_json",
            data: {"companyName": comName},
            success: function (data) {
                // console.log(data.data);
                content.innerHTML = "<div class=\"row\">" +
                    "                <div class=\"col-xs-12 col-lg-12\">" +
                    "                    <h3 style=\"display: inline-block\">公司简介</h3>" +
                    "                    <p>"+data.data.introduction+"</p>" +
                    "                </div>" +
                    "               </div>";
            }
        })
    });

    $("#comContactUs").click(function () {
        $("#comIndex").removeClass("active");
        $("#comIntroduction").removeClass("active");
        $("#comRoute").removeClass("active");
        $("#comMaterial").removeClass("active");
        $("#comContactUs").addClass("active");
        $("#content").empty();
        var content = document.getElementById("content");
        var comName = $("#comNameH").text();
        $.ajax({
            url: "/com_detail_material_json",
            data: {"companyName": comName},
            success: function (data) {
                content.innerHTML = "<div class=\"row\">"+
                    "                <div class=\"col-xs-12 col-lg-12\">" +
                    "                    <h3>联系方式</h3>" +
                    "                    <span class=\"glyphicon glyphicon-earphone\" aria-hidden=\"true\"></span>&nbsp;&nbsp;<h5 style=\"display: inline-block\">联系电话:</h5><p style=\"display: inline-block\">"+data.data.phoneNumber+"</p><br>" +
                    "                    <span class=\"glyphicon glyphicon-map-marker\" aria-hidden=\"true\"></span>&nbsp;&nbsp;<h5 style=\"display: inline-block\">公司所在地:</h5><p style=\"display: inline-block\">"+data.data.addressProvince+"-"+data.data.addressCity+"</p><br>" +
                    "                    <span class=\"glyphicon glyphicon-tag\" aria-hidden=\"true\"></span>&nbsp;&nbsp;<h5 style=\"display: inline-block\">详细地址:</h5><p style=\"display: inline-block\">"+data.data.addressReal+"</p><br>" +
                    "                </div>"+
                    "                </div>";
            }
        })
    });
    
    $("#comRoute").click(function () {
        $("#comIndex").removeClass("active");
        $("#comIntroduction").removeClass("active");
        $("#comContactUs").removeClass("active");
        $("#comMaterial").removeClass("active");
        $("#comRoute").addClass("active");
        $("#content").empty();
        var contentStr = "";
        var contentStart = "<h3>物流专线</h3>";
        var comName = $("#comNameH").text();
        $.ajax({
            url: "/route_company_detail_json",
            data: {"companyName": comName},
            success: function (data) {
                // console.log(data.data);
                var routeId = new Array(data.data.length);
                var routeResourceProvince = new Array(data.data.length);
                var routeResourceCity = new Array(data.data.length);
                var routeResourceCountry = new Array(data.data.length);
                var routeDestinationProvince = new Array(data.data.length);
                var routeDestinationCity = new Array(data.data.length);
                var routeDestinationCountry = new Array(data.data.length);
                for (var i=0; i<data.data.length; i++){
                    routeId[i] = data.data[i].routeId;                            //物流专线Id(点击a标签时使用，待用)
                    routeResourceProvince[i] = data.data[i].routeResourceProvince;//出发省份
                    routeResourceCity[i] = data.data[i].routeResourceCity;        //出发城市
                    routeResourceCountry[i] = data.data[i].routeResourceCountry;  //出发区
                    routeDestinationProvince[i] = data.data[i].routeDestinationProvince;//到达省份
                    routeDestinationCity[i] = data.data[i].routeDestinationCity;        //到达城市
                    routeDestinationCountry[i] = data.data[i].routeDestinationCountry;  //到达区
                    contentStr += "<a style='text-decoration: none' onclick='openRoute(\""+routeId[i]+"\")'>"+routeResourceProvince[i]+"-"+routeResourceCity[i]+"-"+routeResourceCountry[i]+"→"+routeDestinationProvince[i]+"-"+routeDestinationCity[i]+"-"+routeDestinationCountry[i]+"</ a><br>";
                }
                $("#content").html(contentStart+contentStr);
            }
        })
    })

    $("#comMaterial").click(function () {
        $("#comIndex").removeClass("active");
        $("#comIntroduction").removeClass("active");
        $("#comContactUs").removeClass("active");
        $("#comRoute").removeClass("active");
        $("#comMaterial").addClass("active");
        $("#content").empty();
        var contentStart = "<h3>货源信息</h3>";
        var tBodyStr = "";
        var comName = $("#comNameH").text();
        $.ajax({
            url: "/findMaterialByCompanyJson",
            data: {"companyName": comName},
            success: function (data) {
                var materialId = new Array(data.data.length);
                var materialName = new Array(data.data.length);
                var resourceProvince = new Array(data.data.length);
                var resourceCity = new Array(data.data.length);
                var resourceCountry = new Array(data.data.length);
                var destinationProvince = new Array(data.data.length);
                var destinationCity = new Array(data.data.length);
                var destinationCountry = new Array(data.data.length);
                var car = new Array(data.data.length);
                for (var i=0; i<data.data.length; i++){
                    materialId[i] = data.data[i].materialId;                       //货物Id(待用)
                    materialName[i] = data.data[i].materialName;                   //货物名称
                    resourceProvince[i] = data.data[i].resourceAreaProvince;       //出发省份
                    resourceCity[i] = data.data[i].resourceAreaCity;               //出发城市
                    resourceCountry[i] = data.data[i].resourceAreaCountry;         //出发区
                    destinationProvince[i] = data.data[i].destinationAreaProvince; //到达省份
                    destinationCity[i] = data.data[i].destinationAreaCity;         //到达城市
                    destinationCountry[i] = data.data[i].destinationAreaCountry;   //到达区
                    car[i] = data.data[i].suitCarLength+data.data[i].suitableCar;     //试用车
                    tBodyStr += "<tr><th>"+materialName[i]+"</th>"+"<th>"+resourceProvince[i]+"-"+resourceCity[i]+"-"+resourceCountry[i]+"→"+destinationProvince[i]+"-"+destinationCity[i]+"-"+destinationCountry[i]+"</th>"+"<th>"+car[i]+"</th>"+"<th><button type='button' class='btn btn-info btn-sm' onclick='jumpOnto(\""+materialId[i]+"\")'>"+"查看"+"</button></th>"+"</tr>";
                }
                var contentTable = "<table class='table table-bordered'>" +
                    "                   <thead>" +
                    "                       <tr>" +
                    "                           <th>货源名称</th>" +
                    "                           <th>出发地→到达地</th>" +
                    "                           <th>适用车</th>" +
                    "                           <th>操作</th>"+
                    "                       </tr>" +
                    "                   </thead>" +
                    "                   <tbody>" +
                                            tBodyStr+
                    "                   </tbody>" +
                    "               </table>";
                $("#content").html(contentStart+contentTable);
            }
        })
    })

    function jumpOnto(a) {
        window.open("/logisticsPlatform/material_detail_front?materialId="+a);
    }

    function openRoute(a) {
        window.open("/logisticsPlatform/route_detail_front?routeId="+a);
    }
</script>

</body>
</html>
